<template>
  <view>
    <u-tabbar
        style="box-sizing: border-box"
        :value="selectTab"
        :fixed="false"
        :placeholder="false"
        :safeAreaInsetBottom="true"
        class="tabbar"
    >
      <u-tabbar-item text="主页" icon="home" @click="clickTab" class="tabbar" activeColor="#6e8efb" inActiveColor="#a777e3"></u-tabbar-item>
      <u-tabbar-item text="事件申报" icon="server-man" @click="clickTab" class="tabbar" activeColor="#6e8efb" inActiveColor="#a777e3"></u-tabbar-item>
      <u-tabbar-item text="申报列表" icon="file-text" @click="clickTab" class="tabbar" activeColor="#6e8efb" inActiveColor="#a777e3"></u-tabbar-item>
      <u-tabbar-item text="个人中心" icon="account" @click="clickTab" class="tabbar" activeColor="#6e8efb" inActiveColor="#a777e3"></u-tabbar-item>
    </u-tabbar>
  </view>
</template>

<script>

export default {
  name:'tabbar',
  props:{
    selectTabOut:0
  },
  data() {
    return {
      selectTab:0,
    }
  },
  mounted(){
    this.selectTab = this.selectTabOut
  },
  methods: {
    clickTab(e) {
      this.selectTab = e
      this.$emit('changeTab',e)
    },
  }
}
</script>

<style>
.tabbar {
  background: linear-gradient(35deg, #6e8efb33, #a777e333);
}
</style>

